<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
		<title>基于vue-router的案例(后台管理)</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
				width: 100%;
			}
			body{
				font-size:1rem;
			}
			#app{
				width:70%;
				margin:0 15%;
			}
			header{
				height:3.5rem;
				line-height:3.5rem;
				background-color:lightslategrey;
				color:white;
				text-align:center;
				font-size:1.3rem;
			}
			#main{
				min-height:30.5rem;
				width:100%;
				display:flex;
				position:relative;
			}
			.link{
				display:block;
				width:100%;
				height:3rem;
				line-height:3rem;
				text-align:center;
				color:white;
				text-decoration:none;
				background-color:#999;
				border-bottom:0.05rem solid white;
			}
			.link:hover{
				background-color:rgba(255,0,0,.5);
			}
			.left{
				min-height:30rem;
				width:15%;
				background-color:#666;
			}
			.right{
				min-height:30rem;
				width:85%;
			}
			footer{
				height:2rem;
				background-color:#999;
				line-height:2rem;
				text-align:center;
				color:white;
			}
			h3,h4{
				height:3rem;
				line-height:3rem;
				margin-top:1rem;
				text-align:center;
			}
			h3 span,h4 span{
				color:#666;
			}
			table,th,td,tr{
				border:0.05rem solid black;
				border-collapse: collapse;
			}
			table{
				width:80%;
				margin:0 10%;
			}
			tr{
				height:2rem;
				line-height:2rem;
			}
			td{
				text-align:center;
				font-size:0.9rem;
			}
			th{
				background-color:#999;
			}
			button{
				width:3rem;
				height:1.5rem;
				border:none;
				background-color:#666;
				color:white;
				cursor:pointer;
				position:absolute;
				top:1.9rem;
				right:1rem;
			}
			button:hover{
			    background-color:rgba(255,0,0,.5);
			}
			a{
				text-decoration:none;
			}
		</style>
		<style>
			@media (min-width:1000px) {
				html {
					font-size: 20px;
				}
			}

			@media (min-width:500px) and (max-width:100px) {
				html {
					font-size: 16px;
				}
			}

			@media (max-width:500px) {
				html {
					font-size: 12px;
				}
				body{
					background:linear-gradient(#f60,white);
				}
				#app{
					width:auto;
					height:auto;
					margin:0;
				}
				#main{
					min-height:49rem;
				}
				button{
					font-size:0.5rem;
				}
				a{
					color:#666;
				}
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header>传智后台管理系统</header>
			<div id="main">
				<div class="left">
					<router-link to="/user" class="link">用户管理</router-link>
					<router-link to="/quanxian" class="link">权限管理</router-link>
					<router-link to="/shangpin" class="link">商品管理</router-link>
					<router-link to="/dingdan" class="link">订单管理</router-link>
					<router-link to="/xitong" class="link">系统设置</router-link>
				</div>
				<router-view class="right"></router-view>
				
			</div>
			 <footer>版本信息</footer>
		</div>

		<script src="Vue.js"></script>
		<script src="vue-router.js"></script>
		<script>
			/* 基于vue-router的案例 */
			const User = {
				data:function(){
					return {
						userlist:[
							{
								id:1,
								name:"王鑫",
								age:23,
							},
							{
								id:2,
								name:"李四",
								age:34,
							},
							{
								id:3,
								name:"周薪",
								age:21,
							},
							{
								id:4,
								name:"文君",
								age:19,
							},
							{
								id:5,
								name:"王明军",
								age:26,
							},
							{
								id:6,
								name:"心怡",
								age:32,
							},
							{
								id:7,
								name:"徐书蕾",
								age:18,
							},
							{
								id:8,
								name:"王圆圆",
								age:31,
							}
						]
					}
				},
				template:`
				<div>
					<h3><span>用户管理区域</span></h3>
					<table>
						<thead>
							<tr>
								<th>编号</th>
								<th>姓名</th>
								<th>年龄</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr :key="data.id" v-for="data in userlist">
								<td>{{data.id}}</td>
								<td>{{data.name}}</td>
								<td>{{data.age}}</td>
								<td><a href="javascript:;" @click="goDetail(data.id)">操作</a></td>
							</tr>
						</tbody>
					</table>
				</div>
			`,
			methods:{
				goDetail:function(id){
					//编程式路由导航
					this.$router.push("/userInfo/"+id);
				}
			}
			}
			const UserInfo = {
				props:["id"],
				template:`<div>
					<h4><span>用户详情页---用户ID:{{id}}</span></h4>
					<button @click="goback">后退</button>
				</div>`,
				methods:{
					goback:function(){
						//编程式路由导航
						this.$router.go(-1);
					}
				}
			}
			const Quanxian = {
				template:`
				<div>
					<h3><span>权限管理区域</span></h3>
				</div>`
			}
			const Shangpin = {
				template:`
				<div>
					<h3><span>商品管理区域</span></h3>
				</div>
				`
			}
			const Dingdan = {
				template:`
				<div>
					<h3><span>订单管理区域</span></h3>
				</div>`
			}
			const Xitong = {
				template:`
				<div>
					<h3><span>系统设置区域</span></h3>
				</div>`
			}
			
			const router = new VueRouter({
				routes:[
					{
						path:"/",
						redirect:"/user"
					},
					{
						path:"/user",
						component:User
					},
					{
						path:"/userInfo/:id",
						component:UserInfo,
						props:true
					},
					{
						path:"/quanxian",
						component:Quanxian
					},
					{
						path:"/shangpin",
						component:Shangpin
					},
					{
						path:"/dingdan",
						component:Dingdan
					},
					{
						path:"/xitong",
						component:Xitong
					}
				]
			})
			let vm = new Vue({
				el:"#app",
				router
			})
		</script>
	</body>
</html>
